<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- 搜索表单 和新增按钮 -->
        <el-form ref="form" :model="form" label-width="80px">
          <el-row>
            <el-col :span="12">
              <!-- 表单 -->
              <el-form-item label="标签名称" class="formItem">
                <el-input
                  v-model="form.tagName"
                  class="tagsInputSelect"
                />
              </el-form-item>
              <el-form-item label="状态" class="formItem">
                <el-select
                  v-model="form.state"
                  class="tagsInputSelect"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="obj in statusList"
                    :key="obj.value"
                    :label="obj.label"
                    :value="String(obj.value)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="formItem formBtn">
                <el-button size="small" @click="clearFormFn">清除</el-button>
                <el-button size="small" type="primary" @click="SearchFn">搜索</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="12" :push="11">
              <!-- 新增按钮 -->
              <el-button type="success" size="small" @click="addTagsFn">
                <i class="el-icon-edit" />新增标签
              </el-button>
            </el-col>
          </el-row>
        </el-form>

        <!-- 显示条数 -->
        <number-messages :total="totals" />

        <!-- 表格 -->
        <el-table :data="tagsTableList" style="width: 100%">
          <el-table-column type="index" prop="date" label="序号" width="90px" />
          <el-table-column prop="subjectName" label="所属学科" width="300px" />
          <el-table-column prop="tagName" label="标签名称" width="300px" />
          <el-table-column prop="username" label="创建者" width="300px" />
          <el-table-column prop="addDate" label="创建日期" width="300px" />
          <el-table-column
            prop="state"
            label="状态"
            :formatter="stateFormatter"
          />

          <el-table-column label="操作" width="150px">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click="StateChangeFn(scope.row.id,scope.row.state)"
              >
                {{ scope.row.state === 1 ? '禁用' : '启用' }}

              </el-button>
              <el-button type="text" size="small" :disabled="scope.row.state === 1 " @click="editTagFn(scope.row.id)">修改</el-button>
              <el-button type="text" size="small" :disabled="scope.row.state === 1 " @click="delTagsFn(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页组件 -->
        <div class="paginationSize">
          <el-pagination
            background
            :current-page="query.page"
            :page-sizes="[5, 10, 20, 30]"
            :page-size="query.pagesize"
            layout=" prev, pager, next,sizes, jumper"
            :total="totals"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>

        <!-- 新增标签弹出框 -->
        <edit-add-tags v-if="tagsShow" :id="isEditId" v-model="tagsShow" :is-edit="isEditTag" :tags-show="tagsShow" @successAdd="successAddFn" />
      </el-card>
    </div>
  </div>
</template>

<script>
import { status } from '@/api/hmmm/constants'
import { list as tagsList, changeState, remove as removeTags } from '@/api/hmmm/tags'
import EditAddTags from './Dcomponents/EditAddTags.vue'
export default {
  name: 'Tags',
  components: { EditAddTags },
  data() {
    return {
      form: {
        tagName: '',
        state: ''
      },
      statusList: status, // 状态枚举列表
      query: {
        page: 1,
        pagesize: 10
      },
      totals: 0,
      tagsTableList: [], // 标签列表
      tagsShow: false, // 是否显示弹出框
      isEditTag: false, // 是否点击修改
      isEditId: '' // 点击修改的数据id
    }
  },
  created() {
    if (this.$route.query.id) {
      // 调用学科点击
      this.tagsEditEvent()
    } else {
      // 调用获取标签列表方法
      this.tagsList()
    }
  },
  methods: {
    // 是否是在学科中点击去获取标签列表的
    async tagsEditEvent() {
      console.log(this.$route.query.id)
      const res = await tagsList({ ...this.query, subjectID: this.$route.query.id })
      this.totals = res.data.counts
      this.tagsTableList = res.data.items
    },

    // 点击删除标签
    async delTagsFn(id) {
      const res = await removeTags({ id: id })
      if (res.data.success) {
        this.$message.success('删除标签成功')
      } else {
        this.$message('请再试一次')
      }
      if (this.tagsTableList.length === 1) {
        this.query.page--
        if (this.query.page === 0) {
          this.query.page = 1
        }
      }
      this.tagsList()
    },

    // 点击修改 显示弹窗
    editTagFn(id) {
      this.isEditTag = true
      this.tagsShow = true
      this.isEditId = id
    },

    // 点击启动或禁用按钮 改变状态
    async  StateChangeFn(id, state) {
      let res = null
      if (state) {
        res = await changeState({ id: id, state: 0 })
      } else {
        res = await changeState({ id: id, state: 1 })
      }

      if (res?.data?.success) {
        this.$message.success('改变状态成功')
      }
      this.tagsList()
    },

    // 子组件添加标签成功后
    successAddFn() {
      this.tagsShow = false
      this.tagsList()
    },

    // 点击增加 按钮
    addTagsFn() {
      this.isEditTag = false
      this.tagsShow = true
    },

    // 清楚按钮
    clearFormFn() {
      this.form = {
        tagName: '',
        state: ''
      }
    },

    // 搜索按钮
    async SearchFn() {
      this.query = {
        page: 1,
        pagesize: 10
      }
      const newObj = {}
      for (const k in this.form) {
        if (this.form[k]) {
          newObj[k] = this.form[k]
        }
      }
      const res = await tagsList({ ...this.query, ...newObj })
      this.tagsTableList = res.data.items
      this.totals = res.data.counts
    },

    // 格式化状态
    stateFormatter(row, column, cellValue, index) {
      const newObj = this.statusList.find((obj) => obj.value === cellValue)
      return '已' + newObj.label
    },

    // 获取标签列表
    async tagsList() {
      const res = await tagsList({ ...this.query })
      this.totals = res.data.counts
      this.tagsTableList = res.data.items
    },

    // 分页功能
    async handleSizeChange(val) {
      this.query.pagesize = val
      const newObj = {}
      for (const k in this.form) {
        if (this.form[k]) {
          newObj[k] = this.form[k]
        }
      }
      if (this.$route.query.id) {
        newObj.subjectID = this.$route.query.id
      }
      const res = await tagsList({ ...this.query, ...newObj })
      this.totals = res.data.counts
      this.tagsTableList = res.data.items
    },
    async handleCurrentChange(val) {
      this.query.page = val
      const newObj = {}
      for (const k in this.form) {
        if (this.form[k]) {
          newObj[k] = this.form[k]
        }
      }
      if (this.$route.query.id) {
        newObj.subjectID = this.$route.query.id
      }
      const res = await tagsList({ ...this.query, ...newObj })
      this.totals = res.data.counts
      this.tagsTableList = res.data.items
    }

  }
}
</script>

<style scoped>
.app-container {
  padding: 10px;
}
.el-col-push-11 {
  left: 44.83333%;
}
.formItem {
  display: inline-block;
}
.tagsInputSelect {
  height: 1px;
}
.formBtn {
  margin-left: -70px;
}
.el-table.el-table--fit.el-table--enable-row-hover.el-table--enable-row-transition.el-table--medium {
  margin-top: 20px;
  font-size: 15px;
}
button.el-button.el-button--text.el-button--small {
  font-size: 14px;
}
.paginationSize {
    float: right;
    margin: 20px 0 20px 0;
}
</style>
